<template>
  <el-card>
    <div style="width: 100%; text-align: left;">
      <el-button type="danger" plain @click="delPatchExceptionInfo">批量删除</el-button>

      <el-button>开始时间：</el-button>
      <el-time-picker
          v-model="searchModel.begin_time"
          placeholder="开始时间"
          style="width: 120px"
          format="HH:MM"
          value-format="HH:MM"
      />
      <el-button style="margin-left: 10px">结束时间：</el-button>
      <el-time-picker
          v-model="searchModel.end_time"
          placeholder="开始时间"
          style="width: 120px"
          format="HH:MM"
          value-format="HH:MM"
      />
      <el-button style="margin-left: 10px">摄像头名称：</el-button>
      <el-input v-model="searchModel.cameraName" placeholder="请输入摄像头名称" clearable style="width: 150px;"></el-input>
      <el-button type="primary" plain @click="getExceptionInfoList" style="margin-left: 10px;">查询</el-button>
      <el-button type="primary" @click="state.addDialogVisible=true" plain>新增</el-button>
    </div>
    <div style="margin-top: 20px;">

      <el-table
          :data="exceptionInfoList"
          border
          stripe
          style="width: 100%"
          @selection-change="delPacthSelectionChange"
      >
        <el-table-column type="selection" min-width="40" />
        <el-table-column label="#" width="50">
          <template #default="scope">
            {{ (searchModel.currentPage-1)*searchModel.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="camera_name" label="摄像头名称" min-width="100" />
<!--        <el-table-column prop="org_name" label="工区名称" min-width="100" />-->
        <el-table-column prop="warn_time" label="警告时间" min-width="150"/>
        <el-table-column prop="warn_content" label="警告内容" min-width="150"/>
<!--        <el-table-column prop="warn_type" label="识别类型" min-width="120"/>-->
        <el-table-column fixed="right" label="操作" width="136">
          <template #default="scope">
            <el-button type="primary" size="small" @click="editExceptionInfo(scope.row)">编辑</el-button>

            <el-popconfirm
                title="确认删除？"
                @confirm="delExceptionInfo(scope.row)"
                confirm-button-text="确认"
                cancel-button-text="取消"
            >
              <template #reference>
                <el-button type="primary" size="small" @click="delExceptionInfo(scope.row)">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>

      <div class="demo-pagination-block" style="margin-top: 10px;">
        <el-pagination
            v-model:current-page="searchModel.currentPage"
            v-model:page-size="searchModel.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </el-card>
</template>


<script lang="ts" setup>

import {ref, toRefs, reactive, onMounted} from "vue";
import {ExceptionInfoData,ESearchModelData} from "@/entityapi/base";
import {getExceptionListAPI} from "@/api/exceptionapi";
//定义变量
const state=reactive({
  exceptionInfoList: [] as ExceptionInfoData[],
  searchModel:{
    currentPage: 1,
    pageSize:10,
    cameraName: '',
    orgName:'',
    begin_time:'',
    end_time:''
  }as ESearchModelData,
  total:0,

});
const{
  exceptionInfoList,
  searchModel,
  total,
}=toRefs(state)

//change pagesize
const handleSizeChange = (val: number) => {
  state.searchModel.pageSize=val
  //getCameraList()
}
//当前页
const handleCurrentChange = (val: number) => {
  state.searchModel.currentPage=val
  //getCameraList()
}

//初始化方法
onMounted(() => {
  state.total=1
  //先随便初始化一条数据
  const aaa={
    id:1,
    camera_name:"string",
    org_name:"string",
    warn_time:"20230822185412",
    warn_content:"string",
    warn_type:"实时",
  }
  const bbb={
    id:1,
    camera_name:"string",
    org_name:"string",
    warn_time:"20230822185412",
    warn_content:"string",
    warn_type:"实时",
  }
  state.exceptionInfoList.push(aaa)
  state.exceptionInfoList.push(bbb)
  getExceptionInfoList()
});

function getExceptionInfoList(){
  getExceptionListAPI(state.searchModel).then((res:any) =>{
    state.exceptionInfoList=res.exceptionList
    state.total=res.total
  })
}
</script>
